<template>
  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>资金</el-breadcrumb-item>
        <el-breadcrumb-item>收支明细</el-breadcrumb-item>
      </el-breadcrumb>
    <help-components>
				<span slot="headText">{{helpData.templateName}}</span>
				<p slot="headDescText" v-html="helpData.templateRemark"></p>
				<div slot="helpContentWrap">
					<div v-for="(item,index) in helpData.questionAndAnswerArray">
						<h3>{{item.templateContent}}</h3>
						<p v-html="item.templateRemark"></p>
					</div>
				</div>
			</help-components>
    </div>
    <!--end 面包屑-->

    <!--start content-->
    <div class="content">

      <!--高级搜索  start-->
      <div class="height-search">
        <transition name="fade">
          <div class="modal-backdrop" v-show="vue_heightSearch"></div>
        </transition>
        <transition name="slideDown">
          <div class="height-s-con" v-show="vue_heightSearch">
            <p class="search-title">高级搜索</p>
            <el-form ref="Form" :model="form" label-width="80px">
              <el-form-item label="关键字" prop="keyName">
                <el-input v-model="form.keyName"  placeholder="支付流水号"></el-input>
              </el-form-item>
              <el-form-item label="收支类型" prop="paymentType">
                <el-select v-model="form.level" placeholder="请选择">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="收入" value="0"></el-option>
                  <el-option label="支出" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="支付时间" prop="dataTime">
                <el-date-picker v-model="form.dataTime" type="daterange" placeholder="选择日期范围">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="客户名称" prop="name">
                <el-input v-model="form.name"  placeholder="客户名称"></el-input>
              </el-form-item>
              <!--<el-form-item label="支付方式   后续" prop="payType">-->
                <!--<el-select v-model="form.payType" placeholder="请选择">-->
                  <!--<el-option label="全部" value="yf"></el-option>-->
                  <!--<el-option label="线下支付" value="rs"></el-option>-->
                <!--</el-select>-->
              <!--</el-form-item>-->
              <el-form-item label-width="15px">
                <el-button @click="advSearch_searchSure" type="primary">确定</el-button>
                <el-button @click="advSearch_searchCancel">取消</el-button>
                <el-button @click="advSearch_searchClear" type="text">清空</el-button>
              </el-form-item>
            </el-form>
          </div>
        </transition>
      </div>
      <!--高级搜索  end-->

      <div class="ziJin-conPay">
        <!--头部  start-->
        <div class="piliangCao sousuo " v-if="vue_sousuo">
					搜索结果
					<em style="font-style: normal;margin: 0px 20px;">|</em>
					<a @click="advSearch_disable"><em class="iconfont">&#xe66b;</em>清除搜索</a>
					<a @click="advSearch_enable"><em class="iconfont">&#xe62d;</em>继续搜索</a>
				</div>
        <div class="zJ-header" v-else>
          <div class="public-th clearfix">
            <div class="fl">
              <div class="block">
                <el-date-picker
                  v-model="fundListQb.valueData"
                  type="daterange"
                  @change="dateChange"
                  placeholder="选择日期范围">
                </el-date-picker>
              </div>
            </div>
            <div class="public-left clearfix">
              <div class="goods-input">
                <input type="text" placeholder="请输入订单号/客户名称" v-model="fundListQb.fullTextFields" @keydown.enter="queryByMemberNameOrListcode"/><i @click="queryByMemberNameOrListcode"></i>
              </div>
              <span class="fl high_search" @click="vue_heightSearch=true">高级搜索</span>
            </div>
            <!--<el-button type="primary" class="fr">导出</el-button>-->
          </div>
        </div>
        <!--头部   end-->
        <el-table
        	:class="{beforeNone:fundListSet.list.length!='0'}"
          :data="fundListSet.list"
          :max-height="vue_tableH"
          @sort-change="vFun_sort"
          style="width: 100%">
          <el-table-column
            label="支付流水号"
            width="200">
            <template scope="scope">
              <span class="goTo" v-html='scope.row.listCode ' @click="openDetails(scope.$index, fundListSet.list)"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="支付时间"
            prop="createDateStr"
            width="200">
          </el-table-column>
          <el-table-column
            prop="memberName"
            sortable="custom"
            label="客户名称"
            width="200">
          </el-table-column>
          <el-table-column
            prop="fromActionStr"
            label="支付方式"
            width="200">
          </el-table-column>
          <el-table-column
            prop="listMoney"
            sortable="custom"
            label="金额"
            width="200">
          </el-table-column>
          <!--<el-table-column-->
            <!--label="收款账户  后续可能会有"-->
            <!--prop=""-->
            <!--width="162">-->
          <!--</el-table-column>-->
          <el-table-column
            prop="listSummary"
            min-width="200"
            sortable="custom"
            label="摘要">
          </el-table-column>
          <el-table-column
            fixed="right"
            label=""
            width="60">
            <template scope="scope">
              <el-popover trigger="hover" placement="bottom">
                <p class="p" style="cursor: pointer;" @click="openDetails(scope.$index, fundListSet.list)"><em class="iconfont" style="font-size: 15px">&#xe656;</em>详情</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag><em class="iconfont tab-hover">&#xe607;</em></el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parseInt(fundListSet.pageTools.pageNo)"
            :page-sizes="fundListSet.pageTools.pageSizeOptions"
            :page-size="parseInt(fundListSet.pageTools.pageSize)"
            :total="parseInt(fundListSet.pageTools.recordCount)"
            layout="total, prev, pager, next, sizes,jumper">
          </el-pagination>
        </div>
      </div>
    </div>
    <!--end content-->

  </section>
</template>

<script>
  import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
    data() {
      return {
      	vue_sousuo:false,					//继续搜索
        vue_heightSearch: false,  //高级搜索弹层
        vue_tableH:0,
        
        fundListSet:{
        	list:[],								//table表格数据
					pageTools:{},						//分页数据
					sumInfo:{},							//汇总信息
        },
        
        fundListQb:{
        	valueData:[],           //日历日期
		      fullTextFields:'',      //模糊查询,包括订单号和会员名称
		      orderStr:'',
        },
 
        form: {
          keyName:'',             //关键字
          paymentType:'',         //收支类型
          dataTime:'',            //支付时间
          name: '',               //客户名称
          payType:'',             //支付方式
          level:'',
        },
        
        helpData:{
					templateName:"",
					templateRemark:"",
					questionAndAnswerArray:[]
				},
      }
    },

    methods: {
    	vFun_sort(type){
    		if(type.order==='ascending'){
    			this.fundListQb.orderStr=type.prop
    		}else if(type.order==='descending'){
    			this.fundListQb.orderStr=type.prop +' desc'
    		}else{
    			this.fundListQb.orderStr=''
    		};
    		this.queryByPage();
    	},    	
    	query_systemTemplate(){
				this.axios({
					method:"GET",
					url:"/v3/system/templates/001000000010"
				}).then((res)=>{
						this.helpData.templateName = res.data.templateName;
						this.helpData.templateRemark = res.data.templateRemark;
						this.helpData.questionAndAnswerArray = res.data.questionAndAnswerArray;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
//---------------------------详情弹出层  start---------------------------
      openDetails(index, data){
        const h = this.$createElement;
        this.$msgbox({
          title: '详情',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', null, [
                  h('span', {style: 'color:#96a6b6'}, '金额： '),
                  h('i', {style: 'color: #415161'}, data[index].listMoney)
                ],
              ),
              h('p', null, [
                  h('span', {style: 'color:#96a6b6'}, '支付方式： '),
                  h('i', {style: 'color: #415161'}, data[index].fromActionStr)
                ],
              ),
              h('p', {style: 'margin-bottom: 30px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '备注：'),
                  h('i', {style: 'color: #415161'}, data[index].listRemark)
                ],
              ),
              h('p', null, [
                  h('span', {style: 'color:#96a6b6'}, '流水号： '),
                  h('i', {style: 'margin-right: 30px;color: #415161'}, data[index].listCode),
                  h('span', {style: 'color:#96a6b6'}, '日期： '),
                  h('i', {style: 'color: #415161'}, data[index].createDateStr)
                ],
              ),
//              h('p', null, [         后续可能会有
//                  h('span', {style: 'color:#96a6b6'}, '操作人：'),
//                  h('i', {style: 'margin-right: 30px;color: #415161'}, data[index].listCode),
//                  h('span', {style: 'color:#96a6b6'}, '审核人： '),
//                  h('i', {style: 'color: #415161'}, data[index].listCode)
//                ],
//              ),
            ],
          ),
          customClass: "dDFk",
          showCancelButton: true,
          confirmButtonText: '确定',
          showCancelButton: false
        }).then(action => {

        });
      },

//---------------------------高级搜索     start---------------------------
      advSearch_searchCancel(){                                        //高级搜索取消
        this.vue_heightSearch = false;
        this.$refs.Form.resetFields();
        this.vue_sousuo=false;
        this.fundListQb.fullTextFields='';
        this.fundListQb.valueData = [];
      },
      advSearch_searchClear(){                                        //高级搜索清空
      	this.$refs.Form.resetFields();
      	this.fundListQb.fullTextFields='';
      	this.fundListQb.valueData = [];
      },
      advSearch_searchSure(){                                         //高级搜索确认
      	this.fundListQb.fullTextFields='';
      	this.fundListQb.valueData[0] = this.form.dataTime[0];
      	this.fundListQb.valueData[1] = this.form.dataTime[1];
        this.queryByPage(); 
        this.vue_heightSearch = false;
      },
      advSearch_disable(){						//清除搜索
				this.$refs.Form.resetFields();
				this.fundListQb.fullTextFields='';
        this.fundListQb.valueData = [];
				this.vue_sousuo=false;
				this.queryByPage();
			},
			advSearch_enable(){						//继续搜索
				this.vue_heightSearch = true;
			},
//------------------------根据时间范围过滤---------------------------
      dateChange(){
      	this.fundListSet.pageTools = this.$store.state.page;
				this.queryByPage();
    	},
//------------------------模糊搜索---------------------------------			
      queryByMemberNameOrListcode(){                       
      	this.fundListSet.pageTools = this.$store.state.page;
				this.queryByPage();
				this.fundListQb.fullTextFields = "";
      },
//---------------------------分页     start---------------------------
      handleSizeChange(val) {
        this.fundListSet.pageTools.pageSize = val;
      	this.queryByPage();
      },
      handleCurrentChange(val) {
        this.fundListSet.pageTools.pageNo = val;
       	this.queryByPage();
      },
//----------------查询收支流水数据 ---------------------------------
		queryByPage(){
      	this.axios({
          method: 'post',
          url: "/v3/fund/lists/list",
          data: {
            "limit": this.fundListSet.pageTools.pageSize,
            "offset": (this.fundListSet.pageTools.pageNo - 1) * this.fundListSet.pageTools.pageSize,
            "supStartDate":this.fundListQb.valueData[0],                                 //起始时间
            "supEndDate":this.fundListQb.valueData[1],
            "fullTextFilterStr":this.fundListQb.fullTextFields,
            "listCode":this.form.keyName,//流水号
            "listInoutType":this.form.level,          //支出/收入
            "memberName":this.form.name,             //客户名称
            "listPayType":this.form.payType,            //支付方式
            "orderStr":this.fundListQb.orderStr,
          }
        }).then((res) => {
            res.data.list.forEach((item,index,arr)=>{
              item.listMoney = this.Public.formatMoney(item.listMoney,2)
            })
            this.fundListSet.list = res.data.list;
            this.fundListSet.sumInfo = res.data.sumInfo;
            this.fundListSet.pageTools = res.data.pageTools;
            this.fundListSet.pageTools.pageSizeOptions = JSON.parse(this.fundListSet.pageTools.pageSizeOptions);
        }).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });
		},

  },
    created(){
    	this.fundListSet.pageTools = this.$store.state.page;
		},
    mounted(){
//---------------------------打开页面渲染数据   start---------------------------
      this.queryByPage();
     	this.vue_tableH = document.documentElement.clientHeight - 220;
     	//帮助功能
			this.query_systemTemplate();
    }


  };
</script>

<style scoped>

  .ziJin-conPay > .block {
    float: right;
    margin-top: 10px;
  }

  .el-form {
    overflow: hidden;
  }

  .el-form .el-form-item:last-child {
    width: 100%;
  }

  .el-form-item {
    width: 485px;
    float: left;
    margin-right: 10px;
  }

  .goTo:hover {
    color: #13c19f;
    cursor: pointer;
  }

  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(240, 240, 240, 0.2);
  }

  .height-s-con {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
    margin-bottom: 20px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: .4s;
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

  .slideDown-enter-active, .slideDown-leave-active {
    transition: .4s;
  }

  .slideDown-enter, .slideDown-leave-active {
    height: 0;
    opacity: 0;
  }

  section {
    display: flex;
    flex-direction: column;
    flex: 1;
    /*position: relative;*/
  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
  }

  .ziJin-conPay {
    padding: 0px 14px;
  }

  .zJ-header {
    padding: 8px 0;
    min-height: 34px;
  }

  .public-left {
    float: left;
  }

  .public-left:hover span {
    color: #13C19F;
  }

  .public-left a, .public-left span.search-openBtn {
    display: block;
    float: left;
    margin-right: 10px;
    padding-right: 0px;
    position: relative;
    height: 36px;
    line-height: 36px;
    z-index: 100;
    cursor: pointer;
  }

  .goods-input input {
    display: block;
    float: left;
    width: 290px;
    height: 34px;
    font-size: 12px;
    border: 0;
    margin-left: 20px;
  }

  .goods-input {
    float: left;
    width: 340px;
    border: 1px solid #cdd9e6;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    margin-left: 10px;
  }

  .goods-input:hover {
    border-color: #13C19F;
    transition: 1s;
  }

  .goods-input i {
    background: url(../../../img/sousuo.png) no-repeat;
    height: 20px;
    width: 20px;
    display: inline-block;
    position: relative;
    top: 7px;
    right: 5px;
    cursor: pointer;
  }

  .high_search {
    line-height: 36px;
    color: #93a6b7;
    margin-left: 4px;
    cursor: pointer;
  }

  .high_search:hover {
    color: #13C19F;
  }

  .p {
    text-indent: 10px;
    line-height: 30px;
  }

  .p em {
    position: relative;
    top: 2px;
    margin-right: 3px;
  }

  .p:hover {
    background: #eef1f9;
    color: #03B8CC;
  }
	.piliangCao{
		margin-left: -6px;
		height: 45px;
		line-height: 36px;
	}
	.piliangCao em {
		font-size: 14px;
	}

	.piliangCao a {
		cursor: pointer;
		color: #768696;
		margin-right: 20px;
	}
	.sousuo{
		margin-left: 15px;
		margin-top: 10px;
	}
	.piliangCao a:hover{
		color: #03B8CC;
	}
</style>
